<template>
    <NGrid class="mt-4" x-gap="24" y-gap="24" cols="1 600:2 900:3 1280:4" v-if="fund">
        <NGi>
            <NCard title="钱包USDT余额"> {{ fund.walletUsdt }} </NCard>
        </NGi>
        <NGi>
            <NCard title="钱包HKD余额"> {{ fund.walletHkd }} </NCard>
        </NGi>
        <NGi>
            <NCard title="转账卡HKD余额"> {{ fund.transferCardHkd }} </NCard>
        </NGi>
        <NGi>
            <NCard title="USDT 充值统计"> {{ fund.depositUsdt }} </NCard>
        </NGi>
        <NGi>
            <NCard title="USDT 提币总计"> {{ fund.withdrawUsdt }} </NCard>
        </NGi>
        <NGi>
            <NCard title="万事达卡充值总计"> {{ fund.depositMasterCardHkd }} </NCard>
        </NGi>
        <NGi>
            <NCard title="转账卡充值总计"> {{ fund.depositTranferCardHkd }} </NCard>
        </NGi>
        <NGi>
            <NCard title="开卡返佣总计">{{ fund.rebeatOpenCard }} </NCard>
        </NGi>
        <NGi>
            <NCard title="兑换返佣总计"> {{ fund.rebeatExchange }} </NCard>
        </NGi>
        <NGi>
            <NCard title="USDT 兑换 HKD 总计">
                <h4>USDT 账户</h4>
                <div>- {{ fund.exchangeUsdtHkdUsdt }}</div>
                <h4>HKD 账户</h4>
                <div>+ {{ fund.exchangeUsdtHkdHkd }}</div>
            </NCard>
        </NGi>
        <NGi>
            <NCard title="HKD 兑换 USDT 总计">
                <h4>HKD 账户</h4>
                <div>- {{ fund.exchangeHkdUsdtHkd }}</div>
                <h4>USDT 账户</h4>
                <div>+ {{ fund.exchangeHkdUsdtUsdt }}</div>
            </NCard>
        </NGi>
    </NGrid>
</template>

<script lang="ts" setup>
import { queryFund } from '@/api/user'
import { ref } from 'vue'

const fund = ref<Api.User.Fund | null>(null)
queryFund().then(([err, res]) => {
    if (!err && res) {
        fund.value = res
    }
})
</script>
